<template>
  <div>
    <h1>【aty-select】 component demo</h1>
    <p>【aty-select】 本质</p>
    <aty-row class="fd-select-box">
      <aty-row v-if="show">
        <aty-title level="4">1.【aty-select】 基础用法 </aty-title>
        <aty-panel>data为下拉列表的数据</aty-panel>
        <aty-panel>  在展开选择器后，可以使用键盘的up和down快速上下选择，按下Enter选择，按下Esc收起选择器。</aty-panel>
        <aty-row>
          <aty-col span="6">
            <aty-title level="5">基本用法。可以使用 v-model 双向绑定数据。</aty-title>
            <aty-select showTitle v-model="val1" :data="cityListTest" />
            {{val1}}
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-title level="5">基本用法。异步加载数据单选</aty-title>
            <aty-select initDataText="北京市" v-model="val2" :data="cityListTest2" />
            {{val2}}
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-title level="5">基本用法。异步加载数据多选选。</aty-title>
            <aty-select :initDataText="initDataText" v-model="val3" multiple :data="cityListTest3" />
            {{val3}}
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">2.【aty-select】  大小</aty-title>
        <aty-panel>通过设置size属性为large和small将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</aty-panel>
        <aty-col span="6">
          <aty-select size="small" :data="cityList" />
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-select size="default" :data="cityList" />
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-select size="large" :data="cityList" />
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">3.【aty-select】  禁用</aty-title>
        <aty-col span="6">
          <aty-title level="5">通过设置disabled属性。可以禁用下拉框。</aty-title>
          <aty-select :clearable="true" v-model="val1" :data="cityList" />
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-title level="5">通过数据中设置disabled,设置部分选项禁用。</aty-title>
          <aty-select v-model="val11" :data="cityList2" />
        </aty-col>
        <aty-col offset="1">
          <aty-title level="5">值</aty-title>
          {{val11}}
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">4.【aty-select】  可清空选项</aty-title>
        <aty-col span="6">
          <aty-select v-model="val4" :data="cityList" clearable />
        </aty-col>
        <aty-col offset="1">
          {{val4}}
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">5.【aty-select】  分组</aty-title>
        <aty-col span="6">
          <aty-title level="5">基本用法。分组dividedGroups。</aty-title>
          <aty-select v-model="val12" :data="cityList3" dividedGroups />
        </aty-col>
        <aty-col offset="1">
          <aty-title level="5">值</aty-title>
          {{val12}}
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">6.【aty-select】  自定义</aty-title>
        <aty-col span="6">
          <aty-title level="5">未分组，使用 aty-option</aty-title>
          <aty-select>
            <aty-option slot="option"
                        v-for="(item,index) in cityList"
                        :key="item.code"
                        :value="item.code"
                        :disabled="item.disabled"
                        :label="item.name">
              <aty-text class="fd-index" v-text="index+1" />
              <aty-text v-text="item.name" />
              <aty-text class="fd-key" v-text="item.code" />
            </aty-option>
          </aty-select>
        </aty-col>

        <aty-col offset="1" span="6">
          <aty-title level="5">分组</aty-title>
          <aty-select>
            <aty-option-group slot="optionGroup" :data="cityList3">
              <template slot-scope="props">
                <aty-option v-for="(item,index) in props.item"
                            :key="item.code"
                            :value="item.code"
                            :disabled="item.disabled"
                            :label="item.name">
                  <aty-text class="fd-index" v-text="index+1" />
                  <aty-text v-text="item.name" />
                  <aty-text class="fd-key" v-text="item.code" />
                </aty-option>
              </template>
            </aty-option-group>
          </aty-select>
        </aty-col>
        <aty-col offset="1" span="9">
          <aty-title level="5">分组需要配合下列组件</aty-title>
          <aty-title level="5">【aty-option-group，template，aty-option】</aty-title>
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">7.【aty-select】  多选</aty-title>
        <aty-col span="6">
          <aty-title level="5">多选数据双向绑定</aty-title>
          <aty-select v-model="val7" multiple :data="cityList" @change="changeTest" />
        </aty-col>
        <aty-col offset="1">
          <aty-title level="5">值</aty-title>
          {{val7}}
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-title level="5">多选带默认值</aty-title>
          <aty-select v-model="val71" multiple :data="cityList" />
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-title level="5">多选分组</aty-title>
          <aty-select multiple :data="cityList3" dividedGroups />
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">8.【aty-select】  可搜索</aty-title>
        <aty-col span="6" id="haha">
          <aty-title level="5">单选</aty-title>
          <aty-select v-model="val8" filterable pinyin-search :data="cityList" @change="changeTest" @query-change="queryChange" />
          {{val8}}
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-title level="5">多选</aty-title>
          <aty-select v-model="val81" filterable multiple :data="cityList" @change="changeTest" />
        </aty-col>
        <aty-col offset="1" span="6">
          <aty-title level="5">多选删除</aty-title>
          多选搜索时，可以使用键盘Delete快捷删除最后一个已选项。
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">9.【aty-select】 远程搜索</aty-title>
        <aty-panel>
          远程搜索需同时设置 filterable、remote、remote-method 三个 props，在remote-method 中调用回调函数，将过滤的新数据传递回去。
        </aty-panel>
        <aty-panel>remote-method 是远程搜索的方法。</aty-panel>
        <aty-row>
          <aty-title level="5">9.1  用户自定义remote-method </aty-title>
          <aty-col span="6">
            <aty-title level="5">单选</aty-title>
            <aty-select v-model="val9"
                        filterable
                        :remote-method="remoteMethod9" />
          </aty-col>
          <aty-col offset="1">
            <aty-title level="5">单选值</aty-title>
            {{val9}}
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-title level="5">多选</aty-title>
            <aty-select v-model="val91"
                        multiple
                        filterable
                        remote
                        :remote-method="remoteMethod91" />
          </aty-col>
          <aty-col offset="1" span="2">
            <aty-title level="5">多选值</aty-title>
            {{val91}}
          </aty-col>
          <aty-col offset="1" span="5">
            <aty-title level="5">多选删除</aty-title>
            多选搜索时，可以使用键盘Delete快捷删除最后一个已选项。
          </aty-col>
        </aty-row>
        <aty-title level="5">9.2远程搜索的另外一种简洁方式，配置 romoteUrl，有额外参数的话，配置 remoteExtendsParams，无需配置remote-method</aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-title level="5">单选</aty-title>
            <aty-select
              is-debug
              show-log
              name="单选请求"
              v-model="val92"
              filterable
              remote
              remote-url="/static/json/select.json" />
          </aty-col>
          <aty-col offset="1">
            <aty-title level="5">单选值</aty-title>
            {{val92}}
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-title level="5">多选</aty-title>
            <aty-select is-debug
                        show-log
                        name="单选请求"
                        v-model="val921"
                        multiple

                        filterable
                        remote
                        remote-url="/static/json/select.json" />
          </aty-col>
          <aty-col offset="1" span="2">
            <aty-title level="5">多选值</aty-title>
            {{val921}}
          </aty-col>
          <aty-col offset="1" span="4">
            <aty-title level="5">多选删除</aty-title>
            多选搜索时，可以使用键盘Delete快捷删除最后一个已选项。
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">10.【aty-select】 带标签</aty-title>
        <aty-col span="6">
          <aty-title level="5">单选</aty-title>
          <aty-select v-model="val10"
                      :data="cityList"

                      :label="'下拉框'"
                      :labelWidth="80"
                      :labelPosition="'right'"
                      prop="label"
                      :required="true"
                      :min="3"
                      :showMessage="true" />
        </aty-col>
      </aty-row>
      <aty-row v-if="show">
        <aty-title level="4">11.【aty-select】 放置于 body 内,并绑定事件</aty-title>
        <aty-col span="6">
          <aty-select name="transfer" transfer :data="cityList2" @change="change" />
        </aty-col>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">10.【aty-select】 带标签</aty-title>
        <aty-col span="6">
          <aty-title level="5">单选</aty-title>
          <aty-select v-model="val10"
                      :data="cityList"

                      :label="'下拉框'"
                      :labelWidth="80"
                      :labelPosition="'right'"
                      prop="label"
                      :required="true"
                      :min="3"
                      :showMessage="true" />
        </aty-col>
      </aty-row>
    </aty-row>
    <!--fd-select-box  end-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: true,

      val1: 'beijing',
      val2: 'beijing',
      val3: ['beijing'],
      initDataText: ['北京市'],

      val11: 'beijing',
      val12: 'beijing',
      val4: 'beijing',
      val7: [],
      val71: ['hangzhou', 'nanjing'],
      val8: 'beijing',
      val81: ['hangzhou', 'nanjing'],

      val9: '',
      val91: [],

      val92: '',
      val921: [],

      val10: '',

      cityList: [
        {
          code: 'beijing',
          codeType: 'beijing',
          name: '北京市',
          simpleSpell: 'bjs',
          fullSpell: 'beijingshi'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市',
          simpleSpell: 'shs',
          fullSpell: 'shanghaishi'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市',
          simpleSpell: 'szs',
          fullSpell: 'shenzhenshi'

        },
        {
          code: 'hangzhou',
          codeType: 'hangzhou',
          name: '杭州市',
          simpleSpell: 'hzs',
          fullSpell: 'hangzhoushi'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市',
          simpleSpell: 'njs',
          fullSpell: 'nanjingshi'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市',
          simpleSpell: 'cqs',
          fullSpell: 'chongqingshi'
        },
        {
          code: 'guangdong',
          codeType: 'guangdong',
          name: '广东省',
          simpleSpell: 'gds',
          fullSpell: 'guangdongsheng'
        },
        {
          code: 'guangxi',
          codeType: 'guangxi',
          name: '广西',
          simpleSpell: 'gx',
          fullSpell: 'guangxi'
        },
        {
          code: 'hainan',
          codeType: 'hainan',
          name: '海南省',
          simpleSpell: 'hns',
          fullSpell: 'hunansheng'
        },
        {
          code: 'xinjiang',
          codeType: 'xinjiang',
          name: '新疆',
          simpleSpell: 'xj',
          fullSpell: 'xinjiang'
        }
      ],
      cityList2: [
        {
          code: 'beijing',
          disabled: true,
          codeType: 'beijing',
          name: '北京市'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市'
        },
        {
          code: 'hangzhou',
          disabled: true,
          codeType: 'hangzhou',
          name: '杭州市'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市'
        }
      ],
      cityList3: [
        {
          code: '1',
          disabled: true,
          codeType: 'fruit',
          name: '苹果',
          groupName: '水果'
        },
        {
          code: '2',
          codeType: 'fruit',
          name: '香蕉',
          groupName: '水果'
        },
        {
          code: '3',
          codeType: 'fruit',
          name: '梨',
          groupName: '水果'
        },
        {
          code: 'beijing',
          disabled: true,
          codeType: 'beijing',
          name: '北京市',
          groupName: '区域'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市',
          groupName: '区域'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市',
          groupName: '区域'
        },
        {
          code: 'hangzhou',
          disabled: true,
          codeType: 'hangzhou',
          name: '杭州市',
          groupName: '区域'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市',
          groupName: '区域'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市',
          groupName: '区域'
        },
        {
          code: 'fangzi',
          codeType: '房子',
          name: '房子',
          groupName: '其他'
        }
      ],
      cityListTest: [],
      cityListTest2: [],
      cityListTest3: []
    }
  },
  methods: {
    changeTest (value, transfer) {
      console.log(value)
      console.log(transfer)
    },
    change: function (value, transfer) {
      alert(value)
      alert(transfer)
    },
    queryChange (val, name, index) {
      Artery.message.info(val)
    },
    remoteMethod9 (query, callback) {
      console.log('走了单选！remoteMethod 方法')
      setTimeout(() => {
        let list = this.cityList.map(item => {
          return {
            code: item.code,
            name: item.name
          }
        })

        if (query !== '') {
          list = list.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }

        // 回调函数
        callback(list)
      }, 1000)
    },
    remoteMethod91 (query, callback) {
      console.log('走了多选！remoteMethod 方法')

      setTimeout(() => {
        let list = this.cityList.map(item => {
          return {
            code: item.code,
            name: item.name,
            codeType: item.codeType
          }
        })
        if (query !== '') {
          list = list.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }

        // 回调函数
        callback(list)
      }, 2000)
    }
  },
  mounted () {
    var _data = [
      {
        code: 'beijing',
        codeType: 'beijing',
        name: '北京市'
      },
      {
        code: 'shanghai',
        codeType: 'shanghai',
        name: '上海市'
      },
      {
        code: 'shenzhen',
        codeType: 'shenzhen',
        name: '深圳市'
      }
    ]
    this.cityListTest = _data
    // 异步处理数据
    setTimeout(() => {
      this.cityListTest2 = _data
      this.cityListTest3 = _data
    }, 5000)
  }
}

</script>

<style lang="less" type="text/less">
    .fd-select-box {
        margin: 0 20px;
        text-align:left;
        .aty-panel {
            margin-bottom: 10px;
        }
        >.aty-row {
             padding-bottom: 10px;
         }

         .fd-key,
         .fd-index{
             margin-right: 5px;
             color: gray;
             opacity: 0.5;
         }
        .fd-key{
            margin-left: 5px;
            float: right;
        }
     }

</style>
